<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>夸夸星球 - 登录</title>
    <style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #F0E6FA, #E6F5FF);
}

.login-box {
    width: 900px;
    height: 560px;
    display: flex;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    border-radius: 20px;
    overflow: hidden;
}

.left-panel {
    width: 45%;
    background: #7B61FF;
    padding: 40px;
    color: white;
    position: relative;
}

.logo {
    font-size: 32px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.slogan {
    font-size: 20px;
    margin-bottom: 30px;
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.feature-item {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    backdrop-filter: blur(5px);
    transition: transform 0.3s;
}

.feature-item:hover {
    transform: translateY(-3px);
}

.feature-item h3 {
    color: white;
    font-size: 18px;
    margin: 10px 0 5px;
}

.feature-item p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.4;
}

.feature-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.right-panel {
    width: 55%;
    background: white;
    padding: 50px 60px;
    position: relative;
}

.welcome {
    font-size: 24px;
    margin-bottom: 10px;
}

.subtitle {
    color: #666;
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

label {
    font-size: 14px;
    color: #333;
}

input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    margin-top: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

input:focus {
    outline: none;
    border: solid 2px #667eea;
    box-shadow: 0 0 10px rgba(100, 108, 255, 0.2);
}

.login-btn {
    width: 100%;
    background: #7B61FF;
    color: white;
    padding: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 25px;
    transition: opacity 0.3s;
}

.login-btn:hover {
    opacity: 0.9;
}

.action-links {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    font-size: 14px;
}

.footer {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
}

/* 兼容手机端 */
@media (max-width: 768px) {
    .login-box {
        flex-direction: column;
        width: 90%;
        height: auto;
        margin: 20px 0;
    }

    .left-panel,
    .right-panel {
        width: 100%;
        padding: 30px;
    }

    .left-panel {
        border-radius: 20px 20px 0 0;
    }

    .right-panel {
        border-radius: 0 0 20px 20px;
        padding: 40px 30px;
    }

    .feature-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .feature-item {
        padding: 15px;
    }

    .logo {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .slogan {
        font-size: 16px;
    }

    .welcome {
        font-size: 20px;
    }

    .subtitle {
        font-size: 14px;
    }

    input,
    .login-btn {
        padding: 16px;
    }

    .footer {
        position: relative;
        bottom: auto;
        margin-top: 20px;
    }

    .action-links {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .login-box {
        width: 95%;
    }

    .left-panel,
    .right-panel {
        padding: 20px;
    }

    .feature-item h3 {
        font-size: 16px;
    }

    .feature-item p {
        font-size: 12px;
    }
}
.alert-box{
    /* background-color: #c2b7f8;
    color: #694df8; */
    background-color: #d1e7dd;
    color: #0f5132;
    padding: 10px;
    top: 110px;
    border-radius: 5px;
    text-align: center;
    position: fixed;
    z-index: 1000;
    /* border: 3px solid #7B61FF; */
    /* box-shadow: 0 8px 12px #6348e7; */
}
    </style>
</head>
<body>
    <div class="login-box">
        <!-- 左侧内容 -->
        <div class="left-panel">
            <div class="logo">🐰 夸夸星球</div>
            <div class="slogan">治愈系成长助手</div>
            
            <div class="feature-list">
                <div class="feature-item">
                    <div class="feature-icon">✨</div>
                    <h3>性格探索</h3>
                    <p>发现你的闪光点</p>
                </div>
                
                <div class="feature-item">
                    <div class="feature-icon">💬</div>
                    <h3>智能对话</h3>
                    <p>和AI一起变强大</p>
                </div>
                
                <div class="feature-item">
                    <div class="feature-icon">📆</div>
                    <h3>打卡成长</h3>
                    <p>记录每天小确幸</p>
                </div>
                
                <div class="feature-item">
                    <div class="feature-icon">👥</div>
                    <h3>社区互动</h3>
                    <p>找到同频好友</p>
                </div>
            </div>
        
            <div class="footer">
                <p>©2025 上海日如需科技有限公司版权所有</p>
                <p>小红书号：6105400801</p>
            </div>
        </div>

        <!-- 右侧登录表单 -->
        <div class="right-panel">
            <h1 class="welcome">嗨，欢迎回来</h1>
            <p class="subtitle">继续你的成长之旅吧~</p>

            <div class="form-group">
                <label>账号</label>
                <input type="text" placeholder="请输入您的账号">
            </div>

            <div class="form-group">
                <label>密码</label>
                <input type="password" placeholder="请输入您的密码">
            </div>

            <button class="login-btn">登录</button>

            <div class="action-links">
                <a href="#">忘记密码？</a>
                <a href="#">还没有账号？立即注册</a>
            </div>

            <div class="footer">
                安全认证 | 用户协议 | 隐私条款
            </div>
        </div>
    </div>

<script>
    // 重新定义alert，把弹窗做得美观
    window.alert = function(msg) {
        const alertBox = document.createElement('div');
        alertBox.classList.add('alert-box');
        alertBox.innerHTML = msg;
        document.body.appendChild(alertBox);
        setTimeout(() => {
            alertBox.remove();
        }, 3000);
    }
    document.querySelector('.login-btn').addEventListener('click', function(e) {
        e.preventDefault();
        
        const email = document.querySelector('input[type="text"]').value;
        const password = document.querySelector('input[type="password"]').value;

        if (!email || !password) {
            alert('请填写完整的登录信息！');
            return;
        }

        if (!/^\w+([.-]?\w+)*$/.test(email)) {
            alert('请输入有效的账号！');
            return;
        }

        // 模拟登录成功
        alert('登录成功！');
        setTimeout(() => {
            window.location.href = '/dashboard';
        }, 500);
    });
</script>
</body>
</html>